<template>
  <div class="classify">
    <!-- <div class="classify-search">
      <van-search v-model="searchVal" show-action shape="round" placeholder="请输入搜索关键词">
        <template #action>
          <div class="search-btn" @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div> -->
    <div class="classify-carousel">
      <Carousel />
    </div>
    <div class="classify-type">
      <van-grid square :column-num="4" :border="false">
        <van-grid-item v-for="(n,index) in classifyList" :key="index" :icon="n.icons" :text="n.texts" @click="buys()" />
      </van-grid>
    </div>
    <div class="classify-rec">
      <van-cell title="热卖推荐" :border="false" />
      <div class="classify-rec-items">
        <van-card v-for="n in recList" :key="n.id" :tag="n.issprice==1?'热卖':''" :price="n.issprice==1?n.sprice:n.price" :origin-price="n.issprice==0?null:n.price" :desc="n.remark" :title="n.name" :thumb="img + n.imgarr[0]" @click="buys()" />
        <van-empty description="暂无数据" v-if="recList.length == 0" />
      </div>
    </div>
    <van-divider v-if="recList.length != 0" style="width:80%;margin:0.5rem auto;">到底啦！</van-divider>
    <div style="height:1.5rem"></div>
    <TabBar :curr="1" />
  </div>
</template>

<script>
import TabBar from "@/components/TabBar";
import Carousel from '../classify/carousel'
export default {
  name: 'classify',
  data () {
    return {
      searchVal: '',
      classifyList: [
        { icons: require('@/assets/goods/t1.png'), texts: '水果' },
        { icons: require('@/assets/goods/t2.png'), texts: '蔬菜' },
        { icons: require('@/assets/goods/t3.png'), texts: '肉禽' },
        { icons: require('@/assets/goods/t4.png'), texts: '海鲜水产' },
        { icons: require('@/assets/goods/t5.png'), texts: '豆制乳品' },
        { icons: require('@/assets/goods/t6.png'), texts: '米面制品' },
      ],
      recList: [],
    }
  },
  created () {
    this.hotsale()
  },
  methods: {
    buys () {
      this.$router.push({ path: '/buy' })
      localStorage.setItem("type", "2") // 用于区分注册下单和普通下单
    },
    hotsale () {
      this.$axios("/products/productslist", {
        state: 1, //1-上架；2-下架
        type: 2, //区别：1-返回自己的商品类型，2-返回购买时总部/经销商的商品类型
      })
        .then(res => {
          let temp_arr = res.data.data.filter(item => {
            return item.issprice == 1
          }).slice(0, 9) || ''
          this.recList = temp_arr.map(fn => {
            return {
              ...fn,
              imgarr: fn.menuimage.split(',')
            }
          })
        });
    },
  },
  components: {
    TabBar,
    Carousel,
  }
}
</script>


<style lang="less" scoped>
.classify {
  display: flex;
  flex-direction: column;
  &-search {
    .search-btn {
      font-weight: bold;
      color: #1bb89c;
    }
  }
  &-carousel {
    margin: 20px 0;
  }
  &-type {
    width: 95%;
    margin: 10px auto;
    border-radius: 25px;
    box-shadow: 0 5px 5px #eee;
    /deep/ .van-grid {
      width: 100%;
    }
    /deep/ .van-grid-item__content {
      background-color: transparent;
    }
    /deep/ .van-icon__image {
      width: 1.1rem;
      height: 1.1rem;
    }
    /deep/ .van-grid-item__text {
      font-weight: bold;
      font-size: 25px;
    }
  }
  &-rec {
    width: 98%;
    margin: 10px auto;
    /deep/ .van-cell {
      font-weight: bold;
      font-size: 40px;
      padding: 20px 30px;
    }
    &-items {
      display: flex;
      flex-direction: column;
      margin: 10px;
      /deep/ .van-card {
        width: 100%;
        border-radius: 15px;
      }
      /deep/ .van-card__title {
        font-weight: bold;
        font-size: 30px;
        padding-bottom: 20px;
      }
      /deep/ .van-card__price {
        font-weight: bold;
        color: red;
      }
    }
  }
}
</style>